<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="javascript:;" data-to="/">首页</a>
    <a href="javascript:;" data-to="/find">发现</a>
    <a href="javascript:;" data-to="/my">我的</a>
    <div class="box"></div>
    <script>
        const routes = [{
                path: "/",
                component: "首页"
            },
            {
                path: "/find",
                component: "发现"
            },
            {
                path: "/my",
                component: "我的"
            }
        ]
        class History {
            constructor(routes) {
                this.routes = routes;
                this.box = document.querySelector('.box');
                this.init()
            }
            init() {
                let as = document.querySelectorAll('a');
                as.forEach((item) => {
                    item.onclick = () => {
                        
                        this.update(item.getAttribute('data-to'))
                    }
                })
                this.update('/')
            }
            update(path) {
                window.history.pushState({},null,path);
                let res = routes.find((item)=>item.path===path);
                this.box.innerHTML = res.component;
            }
        }
        new History(routes)
    </script>
</body>

</html>